<template>
	<div class='patient_management'>
		<!--头部搜索框-->
		<header>
				<div class="filter-part">
          <div class="filter-item">
						<Input v-model="filterObj.name" placeholder="患者姓名"></Input>
          </div>
          <div class="filter-btn-group">
            <Button type="primary"  icon="ios-search"  @click="handleSearch" class="btn"></Button>
            <Button @click="reset" class="btn">
              <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>             
            </Button>
          </div>
        </div>
		</header>
		<!-- 列表 -->
		<div class="table">
			<Table
				size="small"
				:columns="columns"
				:data="tableData"
				:loading="loading"
				no-data-text="未查询到符合条件的记录"
				stripe
			></Table>
		</div>
    <div class="page">
            <Page :total="count" :current='filterObj.pageNo' :page-size="filterObj.pageSize" show-total show-elevator @on-change="loadPage"/>
        </div>
	</div>
</template>
<script>
import api from "@/api/commonApi";
const filterObj = {
	name: null,
	pageNo: 1,
	pageSize: 10,
	isContract: 'all'
};
export default {
	data() {
		return {
			filterObj: this.deepClone(filterObj),
			count: 0,
			tableData: [],
      columns: [
        { type: "sum", title: "排序", width: 60, align: "center",
          render: (h, params) => {
              let sum = (this.filterObj.pageNo-1)*this.filterObj.pageSize + params.index +1;
              return h("span", sum);
          }
        },
        { title: "患者姓名", key: "name", align: "center" },
        {
          title: "性别", key: "gender", align: "center", render(h, params) {
            let gender = params.row.gender;
            let name = ''
            if(gender ==1) {
              name = '男'
            } else if(gender ==2) {
              name = '女'
            } else {
              name = '其他'
            }
            return name;
          }
        },
        { title: "年龄", key: "age", align: "center" },
        { title: "联系电话", key: "telephone", align: "center" },
        {
          title: "设置",
          key: "iOperate",
          width: 260,
          align: "center",
          render: (h, params) => {
            let gender = params.row.gender;
            if(gender ==1) {
              gender = '男'
            } else if(gender ==2) {
              gender = '女'
            } else {
              gender = '其他'
            }
            return h("div", [
              params.row.contractId &&
              h(
                "span",
                {
                  props: {
                    size: "small",
                    type: "primary"
                  },
                  style: {
                    color: '#5362e1',
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
			                this.functionJS.queryNavgationTo(this, "/index/publicOperation/patientInformation/doctorSign", {contractId: params.row.contractId});
                    }
                  }
                },
                "家医签约",
							),  
              params.row.contractId && '|',                        
							h(
                "span",
                {
                  props: {
                    size: "small",
                    type: "primary"
                  },
                  style: {
                    color: '#5362e1',
                    marginLeft: '5px'
                  },
                  on: {
                    click: () => {
                      const { name, age, telephone, id, pid } = params.row;
			                this.functionJS.queryNavgationTo(this, "/index/publicOperation/patientInformation/record", {
                        name,
                        gender,
                        age,
                        telephone,
                        id,
                        pid
                      });
                    }
                  }
                },
                "就诊记录"
              )
            ]);
          }
        }
      ],
		}
  },
  created() {
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "",
        title: "患者运营管理"
      },
      {
        path: "/index/publicOperation/patientInformation/list",
        title: "患者信息查询"
      }
    ];
    this.$emit("changeBreadList", breadList);
    this.patientList();
  },
	methods: {
    loadPage(index) {
      this.filterObj.pageNo = index;
      console.log(this.filterObj.pageNo)
      this.patientList();
		},
    reset() {
      this.filterObj = this.deepClone(filterObj);
      this.patientList();
    },
    handleSearch() {
      this.filterObj.pageNo = 1;
      this.patientList();
    },
    patientList() {
      const params = this.deepClone(this.filterObj);
      if (params.isContract === 'all') {
        delete params.isContract;
      }
      this.modalTableLoading = true;
      this.$axios
        .post(api.findWxMemberList, params)
        .then(res => {
          if (res.data.code === 1) {
            let ret = res.data.object;
            this.tableData = ret.records;
            this.count = ret.total;           
          } else {
            this.$Message.info(res.data.message);
          }
          this.modalTableLoading = false;
        })
        .catch(() => {
          this.modalTableLoading = false;
        });
    },
		deepClone(obj) {
			return JSON.parse(JSON.stringify(obj));
		}
	},
	watch: {
    'filterObj.pageSize'(nv, ov) {
      this.filterObj.pageNo = 1;
      this.patientList();
    }
	}
}
</script>

<style scoped lang="less">
	.patient_management {
    padding: 20px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .filter-part {
      display: flex;
			flex-wrap: wrap;
			padding-bottom: 10px;
      .filter-item {
        display: flex;
        margin: 10px 10px 10px 0;
        line-height: 32px;
        &>label {
          white-space: nowrap;
          line-height: 32px;
          padding-left: 5px;
          text-align: right;
        }
        .input {
          width: 220px;
        }
        .select {
          width: 70px;
        }
        .content {
          padding-right: 5px;
        }
      }
      .filter-btn-group {
        margin: 10px 10px 10px 0;
        flex: 0 0 auto;
      }
		}
    .table {
      .pagination-wrapper {
        display: flex;
        margin: 20px;
        justify-content: space-between;
        .des {
          display: flex;
          align-items: center;
          .select {
            width: 50px;
          }
        }
      }
    }
    .page{
      text-align: center;
      margin: 20px 0;
    }
    .btn {
      width: 50px;
      height: 32px;
    }
	}
</style>